import style from './index.module.css';
import React from 'react'
import { Button, Input, Table, Space } from 'antd';

const columns = [
  {
    title: '分类名称',
    dataIndex: 'classificationName',
    key: 'classificationName',
  },
  {
    title: '分类类型',
    dataIndex: 'typeOfClassification',
    key: 'typeOfClassification',
  },

  {
    title: '排序',
    dataIndex: 'order',
    key: 'order',
  },
  {
    title: '状态',
    dataIndex: 'state',
    key: 'state',
  },

  {
    title: '操作时间',
    dataIndex: 'operationTime',
    key: 'operationTime'
  },
  {
    title: '操作',
    key: 'action',
    render: () => (
      <Space size="middle">
        <a>修改 </a>
        <a>删除</a>
        <a>禁用</a>
      </Space>
    ),
  },
]
const data = [
  {
    key: '1',
    classificationName: '主食',
    typeOfClassification: '食品',
    order: 1,
    state: '启用',
    operationTime: '2023-10-01 12:34:56',
  },
  {
    key: '2',
    classificationName: '海鲜',
    typeOfClassification: '食品',
    order: 2,
    state: '启用',
    operationTime: '2023-10-01 11:23:45',
  },
  {
    key: '3',
    classificationName: '饮料',
    typeOfClassification: '饮品',
    order: 3,
    state: '启用',
    operationTime: '2023-10-01 10:12:34',
  },
  {
    key: '4',
    classificationName: '甜品',
    typeOfClassification: '食品',
    order: 4,
    state: '启用',
    operationTime: '2023-10-01 09:01:23',
  },
  {
    key: '5',
    classificationName: '水果',
    typeOfClassification: '食品',
    order: 5,
    state: '启用',
    operationTime: '2023-10-01 08:50:12',
  },
  {
    key: '6',
    classificationName: '蔬菜',
    typeOfClassification: '食品',
    order: 6,
    state: '启用',
    operationTime: '2023-10-01 07:40:01',
  },
  {
    key: '7',
    classificationName: '零食',
    typeOfClassification: '食品',
    order: 7,
    state: '启用',
    operationTime: '2023-10-01 06:30:50',
  },
  {
    key: '8',
    classificationName: '酒水',
    typeOfClassification: '饮品',
    order: 8,
    state: '启用',
    operationTime: '2023-10-01 05:20:40',
  },
  {
    key: '9',
    classificationName: '糕点',
    typeOfClassification: '食品',
    order: 9,
    state: '启用',
    operationTime: '2023-10-01 04:10:30',
  },
  {
    key: '10',
    classificationName: '调料',
    typeOfClassification: '食品',
    order: 10,
    state: '启用',
    operationTime: '2023-10-01 03:00:20',
  },
];

export default function classificationManagement() {
  return (
    <div className={style.container}>
      <div className={style.card}>
        <div className={style.cardContent}>

          <div className={style.firstLine}>
            <div className={style.firstLineLabel}>分类名称：</div>
            <Input className={style.input}></Input>
            <div className={style.firstLineLabel}>分类类型：</div>
            <Input className={style.input}></Input>
            <Button className={style.search}>查询</Button>
            <Button className={style.addedMenuCategories}>+新增菜品分类</Button>
            <Button className={style.addedPackageCategories}>+新增套餐分类</Button>
          </div>
          <div className={style.tableContainer}>
            <Table columns={columns} dataSource={data}>

            </Table>
          </div>
        </div>
      </div>
    </div>
  )
}
